import { t } from 'i18next'
import { Draggable, Droppable } from '@/plugins/dnd'
import { useRef, useState } from 'react'
import { StyledPopup, AddIcon, ItemGhost } from './style'
import { Trigger, TriggerInstance } from '@kedacom/react-next'
import { VmpTypeEnum } from '@/api/manager/vmp/interface'
import { VmpMemberEntity } from '../interface'
import { ListItemGhost } from '../../../components/DndGhost'
import { useMeetingParamsStore } from '../../meetingParams/store'
interface MemberItemProps {
	index: number
	onDrop: (dataTransfer: object, index: number) => void
	member: VmpMemberEntity
	dataKey: number
	disabled: boolean
	noAddIcon: boolean
	onTypeSelect: (index: number, name: string, type: number, member: VmpMemberEntity) => void
	onClearVmpMember: (index: number) => void
}
export function MemberItem(props: MemberItemProps) {
	const { member, index, onDrop, disabled, noAddIcon, dataKey, onTypeSelect, onClearVmpMember } = props
	const [active, setActive] = useState(false)
	const { meetingType } = useMeetingParamsStore.getState()
	const triggerRef = useRef<TriggerInstance>(null)
	const handleTypeSelect = (name: string, type: number) => {
		triggerRef.current?.close()
		onTypeSelect(index, name, type, member)
	}
	const renderPopUp = () => {
		return (
			<StyledPopup onClick={() => setActive(false)}>
				<div className="rc_box-menu" onClick={() => handleTypeSelect(t('会议轮询跟随'), 4)}>
					{member.member_type === 4 && <span className="select-icon" />}
					{t('会议轮询跟随')}
				</div>
				<div className="rc_box-menu" onClick={() => handleTypeSelect(t('发言方跟随'), 2)}>
					{member.member_type === 2 && <span className="select-icon" />}
					{t('发言方跟随')}
				</div>
				<div className="rc_box-menu" onClick={() => handleTypeSelect(t('管理方跟随'), 3)}>
					{member.member_type === 3 && <span className="select-icon" />}
					{t('管理方跟随')}
				</div>
				<div className="rc_box-menu" onClick={() => handleTypeSelect(t('内容共享跟随'), 7)}>
					{member.member_type === 7 && <span className="select-icon" />}
					{t('内容共享跟随')}
				</div>
				<div className="item-line"></div>
				<div className="rc_box-menu" onClick={() => handleTypeSelect(t('单通道轮询'), 6)}>
					{member.member_type === 6 && <span className="select-icon" />}
					{t('单通道轮询')}
				</div>
			</StyledPopup>
		)
	}
	const getMembersName = (item: VmpMemberEntity) => {
		if (item.member_type === 1)
			return (
				<div className="cur-mt" title={item.name}>
					{item.name}
				</div>
			) //会控指定直接显示名字
		//其他模式显示 模式+终端
		let dom = <div className="mode">{t(`${VmpTypeEnum[item.member_type]}`)}</div>
		if (item.name) {
			//有终端显示终端
			let _name =
				item.mt_type === 3 && item.account !== item.name ? item.name + '(' + item.account + ')' : item.name
			dom = (
				<>
					<div className="mode">{t(`${VmpTypeEnum[item.member_type]}`)}</div>
					<div className="cur-mt" title={_name}>
						{_name}
					</div>
				</>
			)
		}
		return dom
	}
	return (
		<div
			className={`vmp-list-item ${active ? 'active' : ''}`}
			onMouseLeave={() => setActive(false)}
			data-key={dataKey}
		>
			<Droppable onDrop={(dataTransfer) => onDrop(dataTransfer, index)}>
				{(setDroppableRef) => (
					<div ref={setDroppableRef} className="vmp-drop-item">
						<div
							className="operate"
							onMouseLeave={() => {
								triggerRef.current?.close()
							}}
						>
							{!disabled && meetingType !== 2 && (
								<Trigger onClick={() => setActive(true)} ref={triggerRef} popup={renderPopUp()}>
									<span className="set"></span>
								</Trigger>
							)}
							{!disabled && member.member_type !== 0 && (
								<span className="delete" onClick={() => onClearVmpMember(index)}></span>
							)}
						</div>
						<Draggable
							className="vmp-drag-item"
							canDrag={member.member_type !== 0 && member.member_type !== 6 && !disabled}
							dataTransfer={{
								data: member,
								index: index,
								from: 'vmpItem',
							}}
							ghostRender={
								member.member_type === 1 ? (
									<ListItemGhost
										data={{
											account: member.account,
											account_type: member.account_type ?? 1,
											name: member.name ?? '',
										}}
									/>
								) : (
									<ItemGhost>{t(`${VmpTypeEnum[member.member_type]}`)}</ItemGhost>
								)
							}
						>
							{member.member_type !== 0 ? (
								<div className="_box_content">
									<div className="content">
										<div className="text">{getMembersName(member)}</div>
									</div>
								</div>
							) : noAddIcon ? (
								<></>
							) : (
								<AddIcon />
							)}
						</Draggable>
					</div>
				)}
			</Droppable>
		</div>
	)
}
